<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-23 17:55:01
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-09-01 14:43:43
 * @FilePath: /nhw/src/components/Card/test.vue
-->

<template>
  <div>
    <Card
      class="test-container"
      text="sdfsdf"
      listId="xxx8xxxxxxxxx9xxx89"
      state="待处理"
    />
    <CardTwig left="1号通力按钮失灵" strong />
    <CardTwig left="联系人" right="陈林林" colon>
      <Icon name="friends" size=".5rem" color="#040" />
    </CardTwig>
    <CardTwig left="联系电话" right="138xxxx8888" colon>
      <Icon name="phone" size=".5rem" color="#f40" />
    </CardTwig>
    <CardTwig left="发现时间" right="2021-09-10" colon>
      <Icon name="clock" size=".5rem" color="#f00" />
    </CardTwig>
    <CardBtn>
      <Button color="#7232dd" round>单色按钮</Button>
      <Button color="#7232dd" plain>单色按钮</Button>
      <Button color="linear-gradient(to right, #ff6034, #ee0a24)">
        渐变色按钮
      </Button>
    </CardBtn>
  </div>
</template>

<script>
import "lib-flexible";
import "@/style/global.less";
import Card from "./CardTitle.vue";
import CardTwig from "./CardTwig.vue";
import CardBtn from "./CardBtn.vue";
import { Icon, Button } from "vant";
export default {
  name: "NianhuawanTest",

  components: { Card, CardTwig, Icon, CardBtn, Button },

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.test-container {
  width: 100%;
}
.card-btn-container {
  background: whitesmoke;
}
</style>